<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common :: common(${sysMenu.name})">
</head>
<!-- Content Header (Page header) -->
<div th:replace="contentHeader"></div>
<!-- Main content -->
<section class="content">
	<div class="row">
		<div class="col-xs-12">
			<div class="box">
				<div class="box-header">
					<h3 class="box-title">条件搜索</h3>
				</div>
				<!-- /.box-header -->
				<!-- form start -->
				<form class="form-inline">
					<div class="box-body">
						<div class="form-group">
							<label>账号 </label><input type="text" id="searchUsername"
								class="form-control" placeholder="账号">
						</div>
						<div class="form-group">
							<label>操作时间 </label><input type="text" id="searchRangesDate"
								class="form-control" placeholder="操作时间">
						</div>
						<div class="form-group">
							<label>请求路径 </label><input type="text" id="searchRequestpath"
								class="form-control" placeholder="请求路径">
						</div>
						<div class="form-group">
							<label>请求&nbsp;&nbsp;I&nbsp;&nbsp;P </label><input type="text"
								id="searchIp" class="form-control" placeholder="请求IP">
						</div>
						<div class="form-group">
							<label>包名 </label><input type="text" id="searchPackagename"
								class="form-control" placeholder="包名">
						</div>
					</div>
					<div class="box-body">
						<div class="form-group">
							<label>名字 </label><input type="text" id="searchName"
								class="form-control" placeholder="名字">
						</div>
						<div class="form-group">
							<label>方法名称 </label><input type="text" id="searchMethodname"
								class="form-control" placeholder="方法名称">
						</div>
						<div class="form-group">
							<label>方法描述 </label><input type="text" id="searchMethoddescribe"
								class="form-control" placeholder="方法描述">
						</div>
						<div class="form-group">
							<label>请求参数 </label><input type="text" id="searchParameters"
								class="form-control" placeholder="请求参数">
						</div>
					</div>
					<!-- /.box-body -->
					<div th:replace="boxFooter"></div>
					<!-- /.box-footer -->
				</form>
				<div class="box-body">
					<table id="logOperationTable"></table>
				</div>
				<!-- /.box-body -->
			</div>
			<!-- /.box -->

		</div>
		<!-- /.col -->
	</div>
	<!-- /.row -->

	<div id="detailLogOperationDiv" class="box" style="display: none">
		<div class="box-header with-border">
			<h3 class="box-title" id="detailPackagename"></h3>
		</div>
		<!-- /.box-header -->
		<div class="box-body">
			<p id="detailParameters"></p>
		</div>
		<!-- /.box-body -->
	</div>
</section>
<script type="text/javascript">
	var refresh = function() {
		layer.load();
		$('#logOperationTable').bootstrapTable('refresh', {
			url : '/sys/logOperation/selectPage'
		});
	}

	var queryParams = function(params) {
		params.rangesDate = $('#searchRangesDate').val();
		params.username = $('#searchUsername').val();
		params.name = $('#searchName').val();
		params.ip = $('#searchIp').val();
		params.requestpath = $('#searchRequestpath').val();
		params.packagename = $('#searchPackagename').val();
		params.methodname = $('#searchMethodname').val();
		params.methoddescribe = $('#searchMethoddescribe').val();
		params.parameters = $('#searchParameters').val();
		return params;
	}

	var bootstrapTable = function() {
		$('#logOperationTable').bootstrapTable({
			columns : [ {
				field : 'username',
				title : '账号',
				sortable : true
			}, {
				field : 'name',
				title : '名字',
				sortable : true
			}, {
				field : 'ip',
				title : '请求IP',
				width : 120,
				sortable : true
			}, {
				field : 'requestpath',
				title : '请求路径',
				width : 200,
				sortable : true
			}, {
				field : 'method',
				title : '请求方式',
				width : 80,
				sortable : true
			}, {
				field : 'methodname',
				title : '方法名称',
				width : 150,
				sortable : true
			}, {
				field : 'methoddescribe',
				title : '方法描述',
				width : 200,
				sortable : true
			}, {
				field : 'createtime',
				title : '操作时间',
				width : 200,
				sortable : true
			} ],
			uniqueId : 'id',
			idField : 'id',
			striped : true,
			sidePagination : 'server',
			pagination : true,
			queryParamsType : '',
			pageNumber : 1,
			pageSize : 10,
			pageList : [ 10, 50, 250, 500, 1000 ],
			queryParams : queryParams,
			responseHandler : function(result) {
				layer.closeAll();
				result.rows = result.data.records;
				result.total = result.data.total;
				return result;
			},
			onDblClickCell : function(field, value, row, $element) {
				layer.open({
					type : 1,
					title : '详情',
					content : $('#detailLogOperationDiv'),
					success : function(layero, index) {
						$('#detailPackagename').html(row.packagename);
						$('#detailParameters').html(row.parameters);
					}
				});
			}
		});
	}

	$(function() {
		var locale = {
			format : 'YYYY-MM-DD',
			separator : ' ~ ',
			applyLabel : '确定',
			cancelLabel : '取消',
			customRangeLabel : '自定义',
			daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
			monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ]
		};

		var ranges = {
			'今日' : [ moment(), moment() ],
			'昨日' : [ moment().subtract(1, 'days'), moment().subtract(1, 'days') ],
			'最近7日' : [ moment().subtract(6, 'days'), moment() ],
			'最近30日' : [ moment().subtract(29, 'days'), moment() ],
			'本月' : [ moment().startOf('month'), moment().endOf('month') ],
			'上月' : [ moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month') ]
		};

		$('#searchRangesDate').daterangepicker({
			locale : locale,
			ranges : ranges,
			startDate : moment().startOf('month'),
			endDate : moment().endOf('month')
		});

		bootstrapTable();

		$('#logOperation_search').on('click', function() {
			refresh();
		});
	});
</script>
</html>